﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传测试</title>
    <link rel="stylesheet" type="text/css" href="//www.layuicdn.com/layui/css/layui.css" />
    <script src="//www.layuicdn.com/layui/layui.js"></script>
</head>
<body class="layui-fluid">


<!--<input type="file" name="file" id="file1">-->


<!--<button id="browseButton">浏览文件</button>-->
<!--<button id="upload" onclick="uploader.upload()">上传</button>-->

<div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="browseButton">选择多文件</button> 
    <button type="button" class="layui-btn" id="upload"  onclick="uploader.upload()">开始上传</button>
    <div class="layui-upload-list">
        <table class="layui-table">
            <thead>
            <tr><th>文件名</th>
                <th>大小</th>
                <th>状态</th>
                <th>操作</th>
            </tr></thead>
            <tbody id="demoList"></tbody>
        </table>
    </div>
   
</div> 


<script src="jquery-1.12.4.min.js"></script>
<script src="uploader/uploader.min.js"></script>
<script src="ajaxfileupload.js"></script>
<script>
    //eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1OTIxMjU3MzUsImFwcCI6InRlc3QifQ.dkMuk38IKhZKjbJ56mlGpQH4izeCIkKgB3bEvKJTA8w
    var jwt = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1OTIxMjU3MzUsImFwcCI6InRlc3QifQ.dkMuk38IKhZKjbJ56mlGpQH4izeCIkKgB3bEvKJTA8w";
    //$("#file1").change(function () {
    //    $.ajaxFileUpload({
    //        fileElementId: 'file1',
    //        url: 'http://localhost:6001/upload',
    //        dataType: 'text',
    //        //
    //        success: function (data) {
    //            console.log("上传成功：", data);
    //        },
    //        data: {
    //            "jwt": jwt
    //        }
    //    });
    //});


    var uploader = new Uploader({
        target: 'http://localhost:6001/chunkupload',
        //prioritizeFirstAndLastChunk :true,
        //headers: {jwt: jwt}
    });

    uploader.assignBrowse(document.getElementById('browseButton'));


    //uploader.assignBrowse(document.getElementById('folderButton'), true);

    //
    // 文件添加 单个文件
    var demoListView = $('#demoList');
    var fileList = [];
    uploader.on('fileAdded', function (file, event) {
        console.log("fileAdded:", file, event);
        fileList[file.uniqueIdentifier] = file;
        var tr = $(['<tr id="upload-' + file.id + '" data-id="' + file.uniqueIdentifier +'">'
            ,'<td>'+ file.name +'</td>'
            ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
            ,'<td> 等待上传</td>'
            ,'<td>'
            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
            ,'</td>'
            , '</tr>'].join(''));
 
        //单个重传
        tr.find('.demo-reload').on('click', function(){
           
        });
        
        //删除
        tr.find('.demo-delete').on('click', function (event) {
            var id = $(tr).data("id");
            uploader.removeFile(fileList[id]);
            delete fileList[id]; //删除对应的文件
            tr.remove();
        });
        demoListView.append(tr);
    });

    uploader.on('fileProgress', function (rootFile, file, chunk) {
        var tr = demoListView.find('tr#upload-' + file.id) ,tds = tr.children();
        tds.eq(2).text((chunk.endByte/file.size).toFixed(1)*100+"%");
    });
    // 单个文件上传成功
    uploader.on('fileSuccess', function (rootFile, file, message) {
        message = JSON.parse(message);
        var tr = demoListView.find('tr#upload-' + file.id) ,tds = tr.children();
        console.log("fileSuccess：", rootFile, file, message);
        if (message.ok) {
            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
            tds.eq(3).find('.demo-delete').addClass('layui-hide'); //显示重传
        } else {
            tds.eq(2).html('<span style="color: #FF5722;">'+message.msg +'</span>');
        }
       
    });
    // 根下的单个文件（文件夹）上传完成
    uploader.on('fileComplete', function (rootFile) {

        console.log("fileComplete:", rootFile)
    });
    // 某个文件上传失败了
    uploader.on('fileError', function (rootFile, file, message) {
        message = JSON.parse(message);
        var tr = demoListView.find('tr#upload-' + file.id) ,tds = tr.children();
        tds.eq(2).html('<span style="color: #FF5722;">' + message.msg +'</span>');
        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
    });

</script>
</body>
</html>